<template>
	<el-card shadow="datetime" header="日期时间组件">
		<el-form ref="datetimeFormRef" label-width="100px">
			<el-form-item label="日期">
				<ElDatePicker v-model="state.queryForm.date" placeholder="日期" />
			</el-form-item>
			<el-form-item label="时间">
				<ElTimePicker v-model="state.queryForm.time" placeholder="时间" />
			</el-form-item>
			<el-form-item label="日期时间">
				<ElDatePicker v-model="state.queryForm.datetime" placeholder="日期时间" type="datetime" />
			</el-form-item>
			<el-form-item label="区间时间">
				<ElTimePicker v-model="state.queryForm.startDate" placeholder="发起开始时间" /> ~
				<ElTimePicker v-model="state.queryForm.endDate" placeholder="发起结束时间" />
			</el-form-item>
			<el-form-item label="区间日期">
				<ElDatePicker v-model="state.queryForm.startDate" placeholder="发起开始日期" /> ~
				<ElDatePicker v-model="state.queryForm.endDate" placeholder="发起结束日期" />
			</el-form-item>
		</el-form>
	</el-card>

	<el-card shadow="number" header="数字组件">
		<el-form ref="numberFormRef" label-width="100px">
			<el-form-item label="数字单位">
				<el-input v-model="state.queryForm.saddleNumberStr" placeholder="车座" type="number" max="100" min="1">
					<template #append>座</template>
				</el-input>
			</el-form-item>
			<el-form-item label="数字区间">
				<input-number-range
					:disabled="false"
					:precision="1"
					v-model="state.queryForm.level"
					:minNum="0"
					:maxNum="101"
					:minStr="'最小值1'"
					:maxStr="'最大值100'"
					@changefrom="fnLevels"
					@changeto="fnLevele"
				>
				</input-number-range>
			</el-form-item>
		</el-form>
	</el-card>

	<el-card shadow="selectree" header="列表树组件">
		<el-form ref="selectreeFormRef" label-width="100px">
			<el-form-item label="列表树" prop="carTypeId">
				<el-tree-select
					v-model="state.queryForm.carTypeId"
					:data="ziChanList"
					value-key="id"
					check-strictly
					clearable
					:render-after-expand="false"
					:props="{ value: 'id', label: 'name', children: 'children' }"
					style="width: 100%"
				/>
			</el-form-item>
		</el-form>
	</el-card>

	<el-card shadow="filetree" header="附件">
		<el-form ref="fileFormRef" label-width="100px">
			<el-form-item label="上传附件" prop="carTypeId">
				<el-upload :action="constant.uploadUrl" :before-upload="beforeUpload" :on-success="handleSuccess" :show-file-list="false">
					<el-button type="primary">上传</el-button>
				</el-upload>
			</el-form-item>
			<el-form-item label="上传照片" prop="carTypeId">
				<UploadImgView v-model="state.queryForm.imgUrl"></UploadImgView>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<!-- 
	<el-row>
		<el-col :span="12">
		
		</el-col>
		<el-col :span="12">
		
		</el-col>
	</el-row>
	-->
<script lang="ts" setup>
import { Ref, reactive, ref } from 'vue'
import { useCrud } from '@/hooks'
import constant from '@/utils/constant'
import { IHooksOptions } from '@/hooks/interface'
import { findListByDictId } from '@/api/nb/business/dictionaries_subset'
import { ElMessage, UploadProps } from 'element-plus'
import UploadImgView from '@/views/nb_module/image/upload-img-view.vue'

const state: IHooksOptions = reactive({
	queryForm: {}
})

// 数字区间
// export const inputfrom
const fnLevels = (data: number) => {
	state.queryForm.levelS = data
}
const fnLevele = (data: number) => {
	state.queryForm.levelE = data
}

//列表树
const ziChanList = ref()
const getDictList = (code: String, list: Ref) => {
	findListByDictId({ params: { code: code } }).then(res => {
		list.value = res.data
	})
}
getDictList('ZiChanLeiBie', ziChanList)

//附件
//上传附件
const fileDataForm = reactive({
	name: '',
	platform: '',
	size: '',
	url: ''
})

const handleSuccess: UploadProps['onSuccess'] = (res, file) => {
	if (res.code !== 0) {
		ElMessage.error('上传失败：' + res.msg)
		return false
	}

	Object.assign(fileDataForm, res.data)

	// dataForm.url = fileDataForm.url
}

const beforeUpload: UploadProps['beforeUpload'] = file => {
	if (file.size / 1024 / 1024 / 1024 / 1024 > 1) {
		ElMessage.error('文件大小不能超过100M')
		return false
	}
	return true
}
</script>

<style scoped lang="scss">
.el-card {
	margin-bottom: 15px;
}
</style>
